<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp"%>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/WEB-INF/include/menu.jsp"%>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->

            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user1.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">John Doe <span
                                                  class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user2.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user3.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user4.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user5.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/photos/user-avatar.png" alt=""/>
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">

                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->
        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                添加人员
            </h3>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <div class="panel-body " style="min-height: 725px">
                            <div class="form">
                                <form action="" class="form-horizontal cmxform form-horizontal adminex-form"
                                      id="addForm" onsubmit="return false;">

                                    <div class="form-group">
                                        <label for="username" class="control-label col-md-1">姓名</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="username" name="username" maxlength="20" type="text" class="form-control"
                                                   placeholder="请输入姓名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="loginName" class="control-label col-md-1">登录名</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="loginName" name="loginName" maxlength="20" type="text" class="form-control"
                                                   placeholder="请输入登录名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone" class="control-label col-md-1">手机号码</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="phone" name="phone" type="text" maxlength="11" class="form-control"
                                                   placeholder="请输入手机号码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-1">选择科室</label>
                                        <div class="col-md-4 col-xs-11">
                                            <select class="form-control" style="" id="officeId">
                                                <c:forEach var="item" items="${offices}">
                                                <option value="${item.id}">${item.officeName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-xs-11">
                                            <button class="btn btn-info" type="submit" style="margin-left: 38%">
                                                提交
                                            </button>
                                        </div>
                                        <div class="col-md-4 col-xs-11"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->
        <!--footer section start-->
        <%@ include file="/WEB-INF/include/footer.jsp"%>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<%@ include file="/WEB-INF/include/js.jsp"%>

<script type="text/javascript">

    var phoneReg = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

    $.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = phoneReg;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

    $(function(){
        $('#addForm').validate({
            rules:{
                username:{
                    required:true,
                    rangelength: [2, 20],
                },
                loginName:{
                    required:true,
                    rangelength: [4, 20],
                    remote: {
                        url:ctx + '/common/checkUserCode',
                        type:'get',
                        data:{
                            loginName:function(){return $('#loginName').val()},
                        }
                    }
                },
                phone:{
                    required:true,
                    isMobile:true
                }
            },
            messages:{
                username:{
                    required:'请填写姓名',
                    rangelength:'请输入正确的姓名长度为2～20个字符'
                },
                loginName:{
                    required:'请输入登录名长度为2～20个字符',
                    rangelength: '请输入正确的登录名长度为4～20个字符',
                    remote: '登录名重复，请修正'
                },
                phone:{
                    required:'请输入手机号码'
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            submitHandler:function(form){
                var postData = {
                    phone:$('#phone').val(),
                    loginName:$('#loginName').val(),
                    username:$('#username').val(),
                    officeId:$('#officeId').val()
                };
                utils.post({
                    url:ctx + '/admin/saveOffcieUser',
                    data:postData,
                    success:function(data){
                        if(data.code==200){
                            layer.msg(data.message, {}, function(){
                                window.location.href = ctx + "/amdin/officeUserList";
                            })
                        }else{
                            layer.alert(data.message);
                        }
                    }
                });
            }
        });
    });
</script>

</body>
</html>
